<template>

	<view class="bg-F9F9F9 ">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{title}}</block>
		</cu-custom>

		<!-- 弹出选择 -->
		<SimpleDateTimePicker ref="myPicker" @submit="handleSubmit" :start-year="2000" :end-year="2030" />

		<view class="cu-modal bottom-modal bg-white" :class="modalName=='bottomModal'?'show':''" @tap="cancel">



			<!--   分享 -->
			<view class="bottom-modal-box bg-white border-radius-8 " @tap.stop="" v-if="chanegName=='share'">
				<view class="head padding-tb-xs margin-bottom text-left">
					分享到
				</view>
				<view class="" v-html="shareContent">

				</view>

				<view class="grid col-5 border-bottom  padding-bottom">

					<view class="grid-item  middle flex-wrap" v-for="(item,index) in shareList" :key="index"
						@click="shareEvent(item)">
						<image class="round" :src="item.img" mode=""></image>
						<view class="basis-xll margin-tb-xs">
							{{item.name}}
						</view>
					</view>

				</view>

				<view class=" middle bg-white margin-top" @click="cancel">
					<view class="sumbit-bottom middle round select-box">
						取消
					</view>
				</view>



			</view>



			<!--   时间选择 -->
			<!-- 	<view class="bottom-modal-box bg-white " @tap.stop="" v-if="chanegName=='time'">

				<picker-view indicator-style="indicatorStyle" @change="changeWeek" class="picker-view ">
					<picker-view-column>
						<view class=" middle " v-for="(item,index) in week" :key="index"
							:class="index==weekIndex[0]?'indicatorStyle':''">{{item}}</view>
					</picker-view-column>
					
					<picker-view-column>
						<view class=" middle " v-for="(item,index) in week" :key="index"
							:class="index==weekIndex[1]?'indicatorStyle':''" v-if="index>=weekIndex[0]">

							{{item}}

						</view>
					</picker-view-column>

				</picker-view>


				<view class=" middle bg-white padding-32">
					<view class="sumbit-bottom middle round select-box" @click="sumbitTime">
						确定
					</view>
				</view>



			</view>
 -->
		</view>

		<!-- 弹出选择 -->



		<view class="from-box">

			<view class="form-item bg-white flex align-center justify-between ">
				<view class="title">访客姓名</view>
				<view class="flex align-center">
					<input placeholder="请输入访客姓名" class="text-right" name="input" v-model="postData.name"></input>
					<view class="cuIcon-right-box text-center ">

					</view>

				</view>

			</view>
			<view class="form-item bg-white flex align-center justify-between ">
				<view class="title">访客手机号</view>
				<view class="flex align-center">
					<input placeholder="请输入访客手机号" class="text-right" name="input" v-model="postData.mobile"></input>
					<view class="cuIcon-right-box text-center ">

					</view>

				</view>

			</view>
			<view class="form-item bg-white flex align-center justify-between ">
				<view class="title">到访地址</view>
				<view class="flex align-center ">
					<input placeholder="请输入到访地址" class="text-right" name="input" v-model="postData.address"></input>
					<view class="cuIcon-right-box text-center cuIcon-right middle">
						
					</view>

				</view>

			</view>
			<view class="form-item bg-white flex align-center justify-between "
				@click="openDatetimePicker('start_time')">
				<view class="title">到访时间起</view>
				<view class="flex align-center ">
					<input placeholder="请选择到访时间起" disabled="true" class="text-right  " name="input"
						v-model="postData.start_time"></input>
					<view class="cuIcon-right-box text-center cuIcon-right  middle">
						
					</view>

				</view>

			</view>
			<view class="form-item bg-white flex align-center justify-between " @click="openDatetimePicker('end_time')">
				<view class="title">到访时间止</view>
				<view class="flex align-center">
					<input placeholder="请选择到访时间止" class="text-right" disabled="true" name="input"
						v-model="postData.end_time"></input>
					<view class="cuIcon-right-box text-center cuIcon-right middle">
						
					</view>

				</view>

			</view>
			<view class="form-item bg-white flex align-center justify-between ">
				<view class="title">访客车辆</view>
				<view class="flex align-center ">
					<view class="switch-box round   flex align-center"
						:class="postData.isCart?'switch-hover':'switch-nohover'" @click="changeSwitch">
						<view class="point">

						</view>
					</view>


				</view>

			</view>
			<view class="form-item bg-white flex align-center justify-between ">
				<view class="title">访客车牌号</view>
				<view class="flex align-center">
					<input placeholder="请输入访客车牌号" class="text-right" name="input" v-model="postData.car_number"></input>
					<view class="cuIcon-right-box text-center cuIcon-right middle">
						
					</view>

				</view>

			</view>

			<view class="button-box middle" @click="jumpTo()">
				生成访客邀请
			</view>
		</view>


	</view>
</template>
<script>
	import cuCustom from '../components/header/cu_custom.vue'
	import SimpleDateTimePicker from "../components/picker-time.vue";
	import {
		Request
	} from '../components/config/Request.js'

	import {
		getInviteList
	} from "@/static/server/api/api.js"
	let Reques = new Request();
	export default {
		components: {
			cuCustom,
			SimpleDateTimePicker
		},
		data() {
			return {
				list: null,
				title: "访客邀请",
				modalName: null,
				chanegName: "",
				curType: "",
				shareContent: ``,
				shareList: [

					{
						name: "微信好友",
						type: "weixin",
						img: "/static/server/icon_weixin.png"
					},
					{
						name: "朋友圈",
						type: "weixin",
						img: "/static/server/icon_pengyouquan.png"
					},
					{
						name: "QQ",
						type: "qq",
						img: "/static/server/icon_qq.png"
					},
					{
						name: "微博",
						type: "weibo",
						img: "/static/server/icon_weibo.png"
					},
					{
						name: "复制链接",
						type: "copy",
						img: "/static/server/icon_copy.png"
					}

				],
				postData: {
					name: "",
					isCart: true,
					mobile: "",
					address: "",
					start_time: "",
					end_time: "",
					car_number: "",
				}

			}
		},
		methods: {
			// 打开时间选择picker
			openDatetimePicker(type) {
				this.curType = type;
				this.$refs.myPicker.show();
			},

			// 关闭时间选择picker
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},
			/**
			 * 确认选择的时间
			 * @param {Object} e
			 */
			handleSubmit(e) {
				this.postData[this.curType] = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute;
				// {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}


			},

			/**
			 * 提交邀请
			 * @param {Object} path
			 */
			jumpTo() {

				let d = {},
					dat = this.postData;
				for (let u in dat) {
					let isPass = this.verify(u, dat);
					if (!isPass) {
						return false;
					}

				}
				//提交接口
				uni.showLoading({
					title: "生成中..."
				})

				//生成请求接口 返回id
				//打开分享 
				setTimeout(() => {
					uni.hideLoading();

				}, 1000)


			},
			/**
			 * @param {Object}    
			 */
			select(type) {
				this.chanegName = type;
				this.modalName = "bottomModal";


			},
			/**
			 * @param {Object} path
			 */
			shareEvent(item) {

				uni.getProvider({
					service: "share",
					success: (r) => {
						console.log(r)
					}
				})


				switch (item.type) {
					case "copy":
						uni.setClipboardData({
							data: this.postData.link,
							success: function() {
								uni.showToast({
									title: "成功复制到剪切板",
									icon: "none"
								})
							}
						});

						break;

					default:


						break;
				}
				let id = 1;
				uni.navigateTo({
					url: "/pages/server/property/inviteCode?id=" + id,
				})
			},
			/**
			 * 选择是否有车的开关
			 */
			changeSwitch() {
				(this.postData.isCart) ? (() => {
					this.postData.isCart = false;
				})() : (() => {
					this.postData.isCart = true;
				})();
			},
			/**
			 * 分享
			 */
			share() {
				uni.navigateTo({
					url: "./position"
				})
				return false;
				this.modalName = "bottomModal";
			},
			/**
			 * 取消分享
			 */
			cancel() {
				this.modalName = null;
			},
			/**
			 * 验证表达式
			 */
			verify(...dat) {
				let val = true,
					da = dat[1][dat[0]];
				switch (dat[0]) {
					case "name": //关于username的验证
						if (da.length == 0) {
							Reques.showToast("请输入访客姓名");
							val = false;
						}
						break;
					case "mobile":
						if (!RegExp(/^1[3456789]\d{9}$/).test(da)) {
							Reques.showToast("手机号格式错误");
							val = false
						}
						break;
					case "address":
						if (da.length == 0) {
							Reques.showToast("请输入需要到访的地址");
							val = false
						}
						break;
					case "start_time":
						if (da.length == 0) {
							Reques.showToast("请选择到访时间起");
							val = false
						}
						break;
					case "end_time":
						if (da.length == 0) {
							Reques.showToast("请选择到访时间起止");
							val = false
						}
						break;

					case "car_number":
						if (da.length == 0) {
							Reques.showToast("请输入访客车牌号");
							val = false
						}
						break;


				}
				return val
			},





		}


	}
</script>

<style scoped>
	@import url("@/static/server/css/basic.css");
	@import url("@/static/server/css/icon.css");
	@import url("@/static/server/css/modal.css");

	.bg-F9F9F9 {
		background-color: #F9F9F9;
		min-height: 100vh;
	}

	.from-box {
		margin-top: 16rpx;
	}

	.form-item {
		width: 100vw;
		padding-left: 32rpx;
		padding-right: 32rpx;
		height: calc(100vw*(48/375));
	}

	.form-item .title {
		color: rgba(36, 40, 46, 0.50);
		font-size: 32rpx;
		text-align: left;

		font-family: SourceHanSansSC-regular;
	}

	.form-item view input {
		line-height:  calc(100vw*(48/375));
		height: calc(100vw*(48/375));
	}

	.cuIcon-right-box {
		margin-left: 16rpx;
	}

	.cuIcon-right-box {

		width: calc(100vw*(16/375));
		height: calc(100vw*(16/375));
		color: rgba(36, 40, 46, 0.50);
		font-size: 32rpx;
	
		line-height: calc(100vw*(16/375));

	}


	.switch-box {
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: calc(100vw*(44/375));
		height: calc(100vw*(20/375));
	}

	.switch-hover {
		position: relative;
		background-color: rgba(57, 81, 251, 100);
	}

	.switch-hover .point {
		position: absolute;
		right: 10rpx;
		background-color: white;
	}

	.switch-nohover {
		background-color: rgba(36, 40, 46, 0.50);
		;
	}

	.switch-nohover .point {

		background-color: white;
	}

	.switch-box .point {
		border-radius: 50%;
		width: calc(100vw*(10/375));
		height: calc(100vw*(10/375))
	}




	.button-box {
		border-radius: 16rpx;
		background-color: rgba(57, 81, 251, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 32rpx;
		text-align: center;
		font-family: SourceHanSansSC-regular;
		height: calc(100vw*(48/375));
		width: calc(100vw*(343/375));
		margin: calc(100vw*(56/375)) auto;


	}

	/**
	 * 分享样式
	 * 
	 */
	.bottom-modal {
		height: 100vh;
	}

	.bottom-modal-box {
		padding: 32rpx;
		border-radius: 16rpx;
		width: 100vw;
		max-height: calc(100vw*(359/390));
		bottom: 0;
		position: absolute;

	}

	.sumbit-bottom {
		width: calc(100vw*(100/390));
		height: calc(100vw*(32/390));


	}

	.border-bottom {
		border-bottom: 2rpx solid rgba(245, 245, 245, 100);
	}

	.bottom-modal-box .head {

		color: #ADADAD;
		font-size: 24rpx;
	}

	.grid-item {

		font-size: 28rpx;
		font-family: PingFangSC-regular;
	}

	.grid-item image {

		width: calc(100vw*(45/375));
		height: calc(100vw*(45/375));
	}

	.indicatorStyle {
		color: #3951FB;
	}
</style>
